<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>

  <div class="carousel-wrap">
    <h-carousel>
      <h-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </h-carousel-item>
    </h-carousel>
  </div>


  <router-view/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// import '../packages/carousel'

export default defineComponent({
  setup() {
    return{

    }
  },
})
</script>


<style lang="scss">

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.carousel-wrap{
  width: 600px;
  padding: 24px;
}
</style>
